@charset 'utf-8';

@import 'reset';

@function r($px){
    @return $px / 64px * 1rem
}

@mixin main-plr{
    padding: 0 r(17px);
}
@mixin img{
    display: block;
    width: 100%;
    height: 100%;
}

body{
    background-color: #222222;
}
header{
    display: flex;
    justify-content: space-between;
    @include main-plr;
    padding-top: r(22px);
    padding-bottom: r(22px);
    background-color: #211d1c;
    .turn-off{
        position: relative;
        width: r(58px);
        height: r(58px);
        font-size: r(30px);
        text-align: center;
        line-height: r(58px);
        border-radius: 50%;
        border: none;
        color: #ffffff;
        background: #b70207;
        a{
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left: 0;
        }
    }
    .log-search{
        width: r(480px);
        height: r(58px);
        padding: 0 r(15px);
        border: 1px solid #ffffff;
        border-radius: r(50px);
        overflow: hidden;
        .pic{
            width: r(30px);
            height: r(30px);
            margin-top: r(10px);
            img{
                @include img;
            }
        }
        .search{
            display: block;
            width: r(415px);
            height: r(58px);
            color: #ffffff;
            border: none;
            padding-left: r(30px);
            padding-right: r(10px);
            background-color: #211d1c;
        }
    } 
}
.oth1{
    width: 100%;
    height: r(58px);
    background-color: #222222;
}
.log-wrap{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: r(36px);
    padding-bottom: r(68px);
    background-color: #21201c;
    .pic{
        width: r(145px);
        height: r(145px);
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: r(25px);
        img{
            @include img;
        }
    }
    p{
        a{
            display: block;
            font-size: r(28px);
            color: #fffffd;
            margin-bottom: r(10px);
        }
        
    }
    span{
        display: block;
        font-size: 0;
        a{
            font-size: r(20px);
            color: #4e4c4d;
            text-decoration: underline;
        } 
    }
    
}
.oth2{
    width: 100%;
    height: r(29px);
    background-color: #303030;
}
.item_wrap{
    background-color: #222222;
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: r(100px);
        border-bottom: 1px solid #343434;
        padding: 0 r(34px);
        p{
            font-size: r(28px);
            color: #ffffff;
            
        }
        span{
            font-size: r(14px);
            color: #ffffff;
        }
        &:active{
            background-color: #343434;
        }
        &:last-of-type(1){
            border-bottom: 0;
        }
    } 
    
}
